<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值与表达式</title>
</head>
<body>
    <fieldset>
        <legend>
            插值与表达式
        </legend>
        <p>
            使用双大括号(Mustache语法)“{{}}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来
        </p>
        <div id="app1">
            <p>{{ name }}</p>
        </div>
        <div id="app2">
            <p>{{ date }}</p>
        </div>
        <div id="app3">
            <!--想输出HTML，而不是将数据解释后的纯文本，可以使用v-html-->
            <span v-html="link"></span>
        </div>
        <!--如果想显示{{}}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程-->
        <div id="app4">
             <p>{{message}}</p>
            <!--这里的内容是不会被编译的-->
            <p v-pre>{{message}}</p>
        </div>
        <!--在{{  }}中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算 、 三元运算等-->
        <div id="app5">
            {{number/10}}<br/>
            {{isOK ? '确定':'取消'}}<br/>
            {{text.split(',').reverse().join(',')}}
        </div>
    </fieldset>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *
     */
    var app1 = new Vue({
        el:"#app1",
        data:{
            name:"孤傲苍狼"
        }
    });

    var app2 = new Vue({
        el:"#app2",
        data:{
            date:new Date()
        },
        /**
         *
         * 挂载到实例上后调用
         */
        mounted:function () {
            var _this = this;//声明一个变量指向Vue实例this,保证作用域一致
            this.timer = setInterval(function() {
                _this.date = new Date(); //修改数据date
            },1000);
        },
        beforeDestroy:function () {
            if (this.timer) {
                clearInterval(this.timer);//在Vue实例销毁前，清除我们的定时器
            }
        }
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            link:'<a href="#">这是一个连接</a>'
        }
    });

    var app4 = new Vue({
        el:"#app4",
        data:{
            message:"VUE真的是个好东西"
        }
    });

    var app5 = new Vue({
        el:"#app5",
        data:{
            number: 100 ,
            isOK : false ,
            text :'123,456'
        }
    });

</script>